/* IGGO 2024-09: Article Carousel using Splide
------------------------------------------------------------------------------------------------ */

	/* Set common variables */
	.splide { 
		--transition: .25s cubic-bezier(0.32, 0.74, 0.57, 1);
		--vo-blue: #001e95;
	}

	/* Add up the positional changes inside and match this value */
	.article-carousel { padding-top: calc(1rem + 56px) !important; padding-bottom: 1rem !important; }

	/* Positional styling */
	.article-carousel .splide .splide__list li { transition: var(--transition); opacity: 0.5; border-inline: 20px solid #FFF; transform: translate3d(0, 0, 0); display: flex; flex-direction: column; }
	.article-carousel .splide .splide__list li.is-active { opacity: 1; transform: translate3d(0, -60px, 0); }
	.article-carousel .splide .splide__list li.is-active .image-wrapper {  }
	.article-carousel .splide .splide__list li img { aspect-ratio: 2 / 1; object-fit: cover; width: 100%; height: auto; }

	/* Add active background box */
	.article-carousel:not(.datahub-carousel) .splide .splide__list li.is-active::before { content: ""; position: absolute; bottom: -16px; left: -16px; width: calc(100% + 32px); height: calc(100% - 24px); background: var(--vo-blue); z-index: -1; }

	/* Image and category */
	.article-carousel li .image-wrapper .category { background: var(--vo-blue); padding: 0 20px; height: 40px; line-height: 40px; text-transform: uppercase; color: #FFF; position: absolute; top: 0; left: 0; }

	/* Text */
	.article-carousel .text-wrapper { padding: 16px; background: #FFF; flex: 1; }
	.article-carousel .text-wrapper h3 { margin-bottom: 1rem; }
	.article-carousel .text-wrapper h3 a:hover { text-decoration: none; }

	/*	Lets override normal overflow rules. 
		- This is due to overflow being hidden by default, but since the client desired styling needs some positional trickery.
		- Read: https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue/6433475#6433475
		- If overflow hidden is used, then either overflow-x/y set to visible, will instead use auto, which means it doesn't work.
		- This can be bypassed by using overflow clip, which is a newer property.
	*/
	.article-carousel .splide__track { overflow: clip !important; overflow-y: visible !important; padding-bottom: 16px; }

	/* Move and style the arrows */
	.splide__arrow { top: calc(50% - 30px); width: 48px; height: 48px; background: #e00269; opacity: 1; border-radius: 0; transition: var(--transition); }
	.splide__arrow svg { fill: #FFF; width: 24px; height: 24px; }

	.splide__arrow:hover:not(:disabled) { opacity: 1; background: #ff2480; }

	.splide__arrow--prev { left: calc(10% - 28px); }
	.splide__arrow--next { right: calc(10% - 28px); }

	/* Dots */
	.splide__pagination button { background: rgba(0,0,0,0.42); opacity: 1; margin: 2px; width: 24px; height: 24px; border: 8px solid #FFF; }
	.splide__pagination button:hover { border: 8px solid #F0F0F0; opacity: 1; }
	.splide__pagination button.is-active { background: var(--vo-blue); }


		@media (min-width: 992px) {
			.article-carousel { padding-top: calc(2rem + 80px) !important; }
			.article-carousel li .image-wrapper .category { padding: 0 24px; }
			.article-carousel .text-wrapper { padding: 24px; }
			.article-carousel .splide__track { padding-bottom: 8px; }

			.article-carousel .splide .splide__list li { border-inline: 40px solid #FFF; }
			.article-carousel .splide .splide__list li.is-active { transform: translate3d(0, -80px, 0); }

			.splide__arrow { top: calc(50% - 75px); width: 72px; height: 72px; }
			.splide__arrow svg { width: 30px; height: 30px; }
			.splide__arrow--prev { left: calc(20% - 80px); } /* Original value: 96px, but changed to align the two carousel styles */
			.splide__arrow--next { right: calc(20% - 80px); } /* Original value: 96px, but changed to align the two carousel styles */
		}





/* IGGO 2024-09: Data Hub Carousel using Splide
------------------------------------------------------------------------------------------------ */
	.datahub-carousel .splide__track { padding-bottom: 76px; }
	.datahub-carousel .splide .splide__list li.is-active { transform: translate3d(0, 0, 0); }
	.datahub-carousel .splide .splide__list li::before { content: ""; position: absolute; bottom: -16px; left: -16px; width: calc(100% + 32px); height: calc(100% + 32px); background: var(--vo-blue); z-index: -1; }

	.datahub-carousel .location_wrapper { border-block: 1px solid var(--vo-blue); margin-bottom: 1.625rem; padding-block: 0.75rem; padding-left: 42px; text-transform: uppercase; font-weight: bold; color: var(--vo-blue); font-size: 1.063rem; position: relative; }
	.datahub-carousel .location_wrapper .location_name::before { content:""; position: absolute; left: 0; top: 7px; width: 30px; height: 33px; background: 0px 0px / cover no-repeat url("../img/icon-city.svg"); }

	@media (min-width: 992px) {
		.datahub-carousel .splide .splide__list li img { aspect-ratio: 3 / 4; }
		.datahub-carousel .splide .splide__list li.card-twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.datahub-carousel .text-wrapper { display: flex; flex-direction: column; justify-content: center;  }

		.datahub-carousel .splide__arrow { top: calc(50% - 51px); }
	}